
<template>
  <h1>测试用例</h1>
  <el-row>
    <el-col :span="6"><el-button @click="loadData">测试异步请求</el-button></el-col>
    <el-col :span="6"><el-button @click="loadDictItemByDictId">测试异步请求的问题</el-button></el-col>
  </el-row>

</template>
<script>
import  axios from 'axios';
import config from '../../util/config.js';
export default {
  data(){
    return{
      dict: {}
    }
  },methods:{
    /**
     * 异步请求的问题
     */
    async loadDictItemByDictId() { // 同步请求要求调用的函数必须使用async
      // 根据字典编号查询字典信息
      // axios.get(config.sysUrl + "/sys/dict/queryById?dictId=3").then(res=>{
      //   console.log(res.data.data)
      //   // 将查询的结果设置到data的dict中.
      //   this.dict = res.data.data;
      // });
      // 发送同步请求   // 同步请求会将请求结果作为返回值返回
      // 同步请求在请求的时候需要通过await关键字来获取请求结果
      let res = await axios.get(config.sysUrl + "/sys/dict/queryById?dictId=3");// 同步请求不通过then设置回调函数
      this.dict = res.data.data;
      // 根据字典中的字典类别查询字典项
      axios.get(config.sysUrl + "/sys/dictItem/queryByPage?dictType=" + this.dict.dictType)
          .then(res => {
            console.log("字典项列表:")
            console.log(res.data.data)
          });
    },
    loadData(){
      console.log("加载数据") //1
      // 查询编号为2的字典信息
      console.log("开始查询编号为2的字典信息")// 2
      axios.get(config.sysUrl + "/sys/dict/queryById?dictId=2").then(function(res){
        console.log("编号为2的字典信息:") //5  7
        console.log(res.data.data) // 6   8
      })
      // 查询编号为3的字典信息
      console.log("开始查询编号为3的字典信息")// 3
      axios.get(config.sysUrl + "/sys/dict/queryById?dictId=3").then(res=>{
        console.log("编号为3的字典信息:")// 7   5
        console.log(res.data.data)// 8   6
      });
      console.log("查询完成")// 4

      // .then(接受一个回调函数,来处理响应结果)
      axios.get(config.sysUrl + "/sys/dict/queryById?dictId=4").then(executeResponse);
      // 自定义一个回调函数
      function executeResponse(res){ // 等到后端的响应结果
        console.log("编号为4的字典信息:")//
        console.log(res.data.data)//
      }
    }
  },mounted() {

  }
}
</script>

<style scoped>

</style>